<template>
  <div class="card bg-light-50 rounded w-500px h-500px p-20px box-border">
    <div class="text-center text-xl">欢迎注册</div>
    <div class="mt-30px flex flex-col items-center">
      <div class="w-2/3">
        <default-input v-model:value="account" placeholder="请输入手机号或邮箱"/>
      </div>
      <div class="w-2/3 mt-10px">
        <default-input type="password" v-model:value="password" placeholder="请输入密码"/>
      </div>
      <div class="w-2/3 mt-10px">
        <default-input type="password" v-model:value="rePassword" placeholder="请输入确认密码"/>
      </div>
      <div class="w-2/3 mt-10px between~">
        <div class="flex-1">
          <default-input v-model:value="submitCode" placeholder="请输入验证码"/>
        </div>
        <div class="text-center ml-5px">
          <verify-code :code="verifyCode" @click="setVerifyCode"/>
        </div>
      </div>
      <div class="w-2/3 mt-10px">
        <active-button :active="true" @click="onRegister">注册</active-button>
      </div>
      <div class="text-xs mt-10px">
        <span>已有账号？</span>
        <span class="text-blue-500 cursor-pointer" @click="emits('check')">去登录</span>
      </div>
    </div>
  </div>
  <alert :active="alterActive" :message="alterMessage" type="warning"/>
</template>

<script setup lang="ts">
import DefaultInput from "@/components/customInput/DefaultInput.vue"
import ActiveButton from "@/components/customButton/ActiveButton.vue"
import VerifyCode from "@/components/baseComponents/VerifyCode.vue"
import Alert from "@/components/baseComponents/Alert.vue";
import {useInit, useVerifyCode} from "../hooks"
import {useAlter} from "@/hooks"
import axiosInstance1 from "@/api";

const emits = defineEmits(["check"])
const {account, password, rePassword, submitCode} = useInit()
const {verifyCode, setVerifyCode} = useVerifyCode()
const {alterActive, alterMessage, setAlter} = useAlter("")

async function onRegister() {
  if (account.value === "" || password.value === "" || rePassword.value === "") {
    setAlter("账号或者密码不正确")
    return
  }

  if (password.value !== rePassword.value) {
    setAlter("确认密码不正确")
    return
  }

  if (submitCode.value !== verifyCode.value.join("")) {
    setAlter("验证码不正确")
    return
  }

  const data = await axiosInstance1.post("/v1/register", {
    account: account.value,
    password: password.value
  }, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
  })
  console.log(data)
}
</script>

<style scoped>
.card {
  box-shadow: 0 0 5px var(--gray);
}
</style>